<template>
  <div class="processIntervention">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>流程管理</el-breadcrumb-item>
      <el-breadcrumb-item>流程运维</el-breadcrumb-item>
      <el-breadcrumb-item><a>流程干预</a></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="search-content">
      <el-form :model="searchInfo" label-position="top">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="流程名称" prop="processName">
              <el-input
                v-model="searchInfo.processName"
                placeholder="请输入流程名称"
                size="small"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="提交时间" prop="submitTime">
              <el-date-picker
                v-model="searchInfo.submitTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="small"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="流程ID" prop="processId">
              <el-input
                v-model="searchInfo.processId"
                placeholder="请输入流程ID"
                size="small"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="流程状态" prop="processStatus">
              <el-select
                v-model="searchInfo.processStatus"
                placeholder="请选择流程状态"
                size="small"
              >
                <el-option
                  v-for="item in processStatusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="当前审批" prop="nowDoPerson">
              <person-search v-model="searchInfo.nowDoPerson" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="提交人" prop="submitPerson">
              <person-search v-model="searchInfo.submitPerson" size="small" />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="buttons">
          <el-button type="primary" size="small" @click="getList"
            >查询</el-button
          >
          <el-button size="small" @click="reset">重置</el-button>
        </div>
      </el-form>
    </div>
    <div class="table-content">
      <div class="buttons">
        <el-button
          type="danger"
          :disabled="dangerDisable"
          size="small"
          @click="buttonClick('Stop')"
          >终止流程</el-button
        >
        <el-button
          type="primary"
          :disabled="primaryDisable"
          size="small"
          @click="buttonClick('Back')"
          >退回上一步</el-button
        >
        <el-button
          type="primary"
          :disabled="primaryDisable"
          size="small"
          @click="buttonClick('Jump')"
          >跳过</el-button
        >
      </div>
      <el-table
        :data="tableData"
        class="scroll-content"
        @selection-change="selectionChange"
        ref="elTable"
        border
      >
        <el-table-column
          type="selection"
          :selectable="selectable"
        ></el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column
          label="流程名称"
          prop="process_rule.process_rule_name"
        ></el-table-column>
        <el-table-column label="流程提交人" prop="submit_employee">
          <template slot-scope="scope">
            <show-person :personInfo="scope.row.submit_employee" />
          </template>
        </el-table-column>
        <el-table-column label="提交时间" prop="submit_time"></el-table-column>
        <el-table-column label="当前任务处理人" prop="current_task_employee">
          <template slot-scope="scope">
            <show-person :personInfo="scope.row.current_task_employee" />
          </template>
        </el-table-column>
        <el-table-column label="流程状态" prop="processStatus">
          <template slot-scope="scope">
            {{
              processStatusOptions.filter(
                (item) => item.value === scope.row.process_status
              )[0].label
            }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paginationInfo.current_page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="paginationInfo.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginationInfo.total"
        background
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import personSearch from "@/components/public/personSearch.vue";
import ShowPerson from "@/components/public/showPerson.vue";
import { getProcessList, setApprovalResult } from "@/http/api";
import dayjs from "dayjs";
export default {
  components: { personSearch, ShowPerson },
  name: "ProcessIntervention",
  data() {
    return {
      searchInfo: {
        processName: "",
        submitTime: [],
        processId: "",
        processStatus: "",
        nowDoPerson: {},
        submitPerson: {},
      },
      processStatusOptions: [
        {
          label: "结束",
          value: "end",
        },
        {
          label: "审批中",
          value: "inApproval",
        },
        {
          label: "终止",
          value: "stop",
        },
      ],
      tableData: [],
      paginationInfo: {
        current_page: 1,
        page_size: 10,
        total: 0,
      },
      dangerDisable: true,
      primaryDisable: true,
      selectedRows: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    reset() {
      this.searchInfo = {
        processName: "",
        submitTime: [],
        processId: "",
        processStatus: "",
        nowDoPerson: {},
        submitPerson: {},
      };
    },
    handleSizeChange() {
      console.log("handleSizeChange");
    },
    handleCurrentChange() {
      console.log("handleCurrentChange");
    },
    selectionChange(selection) {
      this.selectedRows = selection;
      if (selection.length) {
        this.dangerDisable = false;
        if (selection.length === 1) {
          this.primaryDisable = false;
        } else {
          this.primaryDisable = true;
        }
      } else {
        this.dangerDisable = true;
        this.primaryDisable = true;
      }
    },
    async buttonClick(type) {
      let selection = this.$refs.elTable.selection;
      if (selection.length > 1) {
        let ifSuccess = true;
        selection.forEach(async (element) => {
          let res = await setApprovalResult({
            process_id: element.process_id,
            result: type,
          });
          if(res.code !== 20031) {
            ifSuccess = false
          }
        });
        if(ifSuccess) {
          this.$message.success("修改成功")
          this.getList()
        }
      } else {
        let res = await setApprovalResult({
          process_id: selection[0].process_id,
          result: type,
        });
        if(res.code === 20031) {
          this.$message.success("修改成功")
          this.getList()
        } else {
          this.$message.error(res.msg)
        }
      }
    },
    async getList() {
      let res = await getProcessList({
        ...this.searchInfo,
        ...this.paginationInfo,
      });
      if (res.code === 20041) {
        this.tableData = res.data.rows;
        this.paginationInfo = res.data.page;
        this.tableData.forEach((element) => {
          element.submit_time = dayjs(element.submit_time).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        });
      }
    },
    selectable(row) {
      return row.process_status === "inApproval";
    },
  },
};
</script>
<style lang="less" scoped>
.processIntervention {
  .search-content {
    margin-bottom: 20px;
    :deep {
      .el-select,
      .el-autocomplete,
      .el-date-editor.el-range-editor {
        width: 100%;
      }
      label {
        line-height: 16px;
        padding-bottom: 4px;
      }
      .buttons {
        width: 100%;
        text-align: right;
      }
      .el-form-item {
        margin-bottom: 10px;
      }
    }
  }
  .table-content {
    height: calc(100vh - 390px);
    .el-table {
      height: calc(100vh - 500px);
      /deep/ tbody tr:hover td {
        background-color: #dfecf7;
      }
    }
    .el-pagination {
      display: flex;
      justify-content: end;
      margin-top: 8px;
    }
    .buttons {
      margin-bottom: 10px;
    }
  }
}
</style>
